<template>
	<view class="after_sale pages">
		<view class="list">
			<view class="order_item" v-for="item in orderList" :key="item.id">
				<view class="order_header">
					{{item.status_str}}({{item.type_str}})
				</view>
				<view class="order_detail">
					<view class="order_img">
						<image :src="item.good_mainimg" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="order_content">
						<view style="font-size: 28rpx;">{{item.good_name}}</view>
						<!-- <view class="order_txt">{{item.reason}}</view> -->
						<view class="size">
							{{item.sku_name}} {{$t('order.afterSale.Num')}} {{item.renums}}
						</view>
						<view class="order_money">
							<text class="money_txt">
								{{$t('order.afterSale.Refund')}} ￥
							</text>
							<text>{{item.refmoney}}</text>
						</view>
					</view>
				</view>
				<view class="order_btns">
					<view class="order_btn" @tap="openDetail(item.id)">
						{{$t('order.afterSale.See')}} 
					</view>
					<view class="order_btn" v-show="item.cancel_btn==1" @tap="serviceCancel(item.id)">
						{{$t('order.afterSale.Revoke')}}
					</view>
					<view class="order_btn" v-show="item.wl_btn==1" @tap="toLogistics(item.id)">
						{{$t('order.afterSale.Fill')}}
					</view>
				</view>
			</view>
		</view>
		<view class=" no_list" v-if="orderList.length==0">
			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png" :text="$t('general.Indent')">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { serviceLists, serviceCancel } from '@/api/api.js'
	export default {
		data() {
			return {
				orderList: [],
				page: 1
			}
		},
		onReachBottom(){
			this.page++
			this.serviceLists()
		},
		onShow() {
			this.page = 1
			this.orderList = []
			this.serviceLists()
			uni.setNavigationBarTitle({
				title: this.$t('list.Tui')
			})
		},
		methods: {
			openDetail(id) {
				uni.navigateTo({
					url: "/pages/shop/order/afterSaleDetail?id=" + id
				})
			},
			toLogistics(id){
				uni.navigateTo({
					url: "/pages/shop/order/ReturnLogistics?id=" + id
				})
			},
			serviceLists(){
				serviceLists({
					token: uni.getStorageSync('token'),
					page: this.page
				}).then(res=>{
					if(res.data.data.data.length > 0){
						this.orderList = [...this.orderList, ...res.data.data.data]
					}else{
						this.page--;
						uni.showToast({
							title: this.$t('order.afterSale.More'),
							icon: "none"
						})
					}
				})
			},
			serviceCancel(id){
				serviceCancel({
					token: uni.getStorageSync('token'),
					serid: id
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						this.page = 1
						this.orderList = []
						this.serviceLists()
					}, 600)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.after_sale {
		.list {
			border-top: 16rpx solid #f5f5f9;

			.order_item {
				padding: 20rpx 30rpx 30rpx 20rpx;
				border-bottom: 16rpx solid #f5f5f9;

				.order_header {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
					font-weight: 500;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #f5f5f8;
				}

				.order_detail {
					display: flex;
					padding: 30rpx;
					border-bottom: 2rpx solid #f5f5f8;

					.order_img {
						width: 180rpx;
						height: 180rpx;
						border: 2rpx solid #f5f5f8;
						display: flex;
						justify-content: center;
						align-items: center;

						uni-image {
							width: 100%;
							height: 100%;
						}
					}

					.order_content {
						flex: 1;
						margin-left: 30rpx;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						justify-content: space-between;


						.order_txt {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box; //使用自适应布局
							-webkit-line-clamp: 2; //设置超出行数，要设置超出几行显示省略号就把这里改成几
							-webkit-box-orient: vertical;
							font-size: 24rpx;
							font-weight: 500;
							line-height: 36rpx;
							color: #666;
						}

						.size {
							font-size: 24rpx;
							font-weight: 400;
							color: #9e9ea9;
							margin-top: 0;
							margin-bottom: auto;
						}

						.order_money {
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.8);
							font-weight: 600;
						}
					}
				}

				.order_btns {
					display: flex;
					flex-direction: row-reverse;
					margin-top: 20rpx;

					.order_btn {
						padding: 10rpx 20rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #666;
						border-radius: 6rpx;
						border: 2rpx solid #ededed;
						margin: 0 10rpx;
					}
				}
			}
		}
	}
</style>